
.table-of-content {
    position: fixed;
    top: 6rem;
    right: 5rem;
    background-color: var(--bg-toc-color);
    padding: 1rem;
    border-radius: .25rem;
    z-index: 2;
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
    width: 20rem;
    max-height: 50vh;
    overflow: auto;
  }
  
  .toc {
    &--empty_state {
      color: #777;
      user-select: none;
    }
  
    &--list {
      gap: .5rem;
    }
  
    &--list,
    &--item--children {
      display: flex;
      flex-direction: column;
    }
  
    &--list a {
      color: var(--bg-toc-text-color);
      font-size: 16px;
      text-decoration: none;
    }
  
    &--item {
      padding-left: calc(1rem * (var(--level) - 1));
    }
  }
  
